<!-- 用户编辑弹窗 -->
<template>
  <el-dialog width="680px" :visible="visible" :lock-scroll="false" :destroy-on-close="true"
    custom-class="ele-dialog-form" :title="isUpdate?'修改门禁':'添加门禁'" @update:visible="updateVisible">
    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
      <el-row :gutter="15">
        <el-col :sm="12">
          <el-form-item label="父门禁:" prop="pid">
            <el-select filterable clearable v-model="form.pid" :options="cradlcassList" size="small" placeholder="-父门禁-"
              class="ele-block">
              <el-option v-for="item in cradlcassList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-form-item label="设备名称:" prop="name">
        <el-input clearable v-model="form.name" placeholder="请输入设备名称" />
      </el-form-item>
      <!--      <el-form-item label="设备类型:">
        <el-radio-group
          v-model="form.door_type">
          <el-radio :label="0">原门禁</el-radio>
          <el-radio :label="1">mqtt</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <el-form-item label="是否大门门禁:">
        <el-radio-group v-model="form.is_door">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="设备id:" prop="door_id">
        <el-input clearable v-model="form.door_id" placeholder="请输入设备id" />
      </el-form-item>

      <el-form-item label="排序:" prop="sort">
        <el-input clearable v-model="form.sort" placeholder="排序" />

      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消
      </el-button>
      <el-button type="primary" :loading="loading" @click="save">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import validate from 'ele-admin/packages/validate';


  export default {
    name: 'UserEdit',
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object
    },

    data() {
      return {
        // 省市区数据

        // 选中的省市区
        city: [],
        // 选中的省市
        provinceCity: [],
        // 选中的省
        province: [],
        // 表单数据
        form: Object.assign({
          status: 1
        }, this.data),
        // 表单验证规则
        rules: {
          // username: [
          //   {
          //     required: true,
          //     type: 'string',
          //     trigger: 'blur',
          //     validator: (rule, value, callback) => {
          //       if (!value) {
          //         return callback(new Error('请输入用户账号'));
          //       }
          //       this.$http.get('/user/checkUser?username=' + value).then(res => {
          //         if (res.data.code !== 0 || !res.data.data.length) {
          //           return callback();
          //         }
          //         if (this.isUpdate && res.data.data[0].username === this.data.username) {
          //           return callback();
          //         }
          //         callback(new Error('账号已经存在'));
          //       }).catch(() => {
          //         callback();
          //       });
          //     }
          //   }
          // ],

          status: [{
            required: true,
            message: '请选择状态',
            trigger: 'blur'
          }],

          sort: [{
            required: true,
            message: '请输入排序号',
            trigger: 'blur'
          }],
          price: [{
            pattern: validate.email,
            message: '邮箱格式不正确',
            trigger: 'blur'
          }],

        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        // 角色列表
        roleList: [],
        // 职级列表
        levelList: [],
        // 岗位列表
        positionList: [],
        // 部门列表
        deptList: [],
      };
    },
    watch: {
      data() {
        if (this.data) {
          this.form = Object.assign({}, this.data, {
            // 清空密码
            password: "",
          });
          // 取值赋予城市组件
          this.city = this.data.city;
          this.isUpdate = true;
        } else {
          this.form = {};
          this.isUpdate = false;
          // 清空省市区控件
          this.city = [];
        }
      }
    },
    mounted() {

      this.getCradlcassList(); // 查询职级列表

    },
    methods: {
      /* 保存编辑 */
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true;
            // 城市数据处理
            this.form = Object.assign({}, this.form, {
              city: this.city
            });
            this.$http.post('/door/edit', this.form).then(res => {
              this.loading = false;
              if (res.data.code === 200) {
                this.$message({
                  type: 'success',
                  message: res.data.msg
                });
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit('done');
              } else {
                this.$message.error(res.data.msg);
              }
            }).catch(e => {
              this.loading = false;
              this.$message.error(e.message);
            });
          } else {
            return false;
          }
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },


      getCradlcassList() {
        this.$http.get('/door/getCradlcassList').then(res => {
          if (res.data.code === 0) {

            this.cradlcassList = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          this.$message.error(e.message);
        });
      },


    }
  }
</script>

<style scoped>
</style>